<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>02_模板语法</title>
  </head>
  <body>
    <!--
      1. 模板的理解:
        动态的html页面
        包含了一些JS语法代码
          双大括号表达式
          指令(以v-开头的自定义标签属性)
      2. 双大括号表达式
        语法: {{exp}} 或 {{{exp}}}
        功能: 向页面输出数据
        可以调用对象的方法
      3. 指令一: 强制数据绑定
        功能: 指定变化的属性值
        完整写法:
          v-bind:xxx='yyy'  //yyy会作为表达式解析执行
        简洁写法:
          :xxx='yyy'
      4. 指令二: 绑定事件监听
        功能: 绑定指定事件名的回调函数
        完整写法:
          v-on:click='xxx'
        简洁写法:
          @click='xxx'
      -->
    <div id="app">
      <h2>1. 双大括号表达式</h2>
      <p>{{ msg }}</p>
      <h2>2. 指令一: 强制数据绑定</h2>
      <input type="text" v-bind:value="msg" />
      <input type="text" :value="msg" />
      <h2>3. 指令二: 绑定事件监听</h2>
      <button v-on:click="handleClick">按钮</button>
      <button @mousemove="handleClick">按钮</button>
    </div>
    <script src="../js/vue.js"></script>
    <script>
      /*
        指令语法：
          1. v-model="JS表达式"
          2. v-bind:属性名="JS表达式"
            作用：单向数据绑定
            简写： :
          3. v-on:事件名="事件回调函数"   
            作用：绑定事件监听
            简写： @   
      */
      new Vue({
        el: "#app",
        // 定义非函数数据
        data: {
          msg: "hello msg",
        },
        // 定义方法数据
        methods: {
          // 事件回调函数都得写成普通函数形式
          handleClick(e) {
            console.log("handleClick", this, e);
          },
        },
      });
    </script>
  </body>
</html>
